<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>scrollToTop</title>
    <style>
        .block {
            height: 1000px;
            border: 1px solid #222;
            width: 200px;
        }
    </style>
</head>
<body>

<div class="block" style="background-color: #ff0002">1</div>
<div class="block" style="background-color: #ff7b00">2</div>
<div class="block" style="background-color: #fff700">3</div>
<div class="block" style="background-color: #00ff02">4</div>
<div class="block" style="background-color: #00fcff">5</div>
<div class="block" style="background-color: #0100ff">6</div>
<div class="block" id="7" style="background-color: #ff00dc">7</div>
<button onclick="scrollToTop()" style="position: fixed;bottom: 10px;left: 20px;">向上滚动</button>

</body>
<script type="text/javascript">
    var trigger = false

    function scrollToTop() {
        if (trigger) return;
        var curTop = document.documentElement.scrollTop || document.body.scrollTop
        var each = curTop / 2000
        var timer = setInterval(function () {
            trigger = true
            curTop -= each
            each += 5
            if (curTop <= 0) {
                clearInterval(timer)
                trigger = false
            }
            window.scrollTo(0, curTop)
        }, 30)
    }
</script>
</html>